import * as React from 'react';
import { SliderField, SliderFieldProps } from '@aws-amplify/ui-react';
import { SliderFieldPropControlsProps } from './SliderFieldPropControls';
import { demoState } from '@/utils/demoState';

export interface UseSliderFieldProps {
  (initialValues: SliderFieldProps): SliderFieldPropControlsProps;
}

export const useSliderFieldProps: UseSliderFieldProps = (initialValues) => {
  const [isDisabled, setIsDisabled] = React.useState(initialValues.isDisabled);
  const [isValueHidden, setIsValueHidden] = React.useState(
    initialValues.isValueHidden
  );
  const [label, setLabel] = React.useState(initialValues.label);
  const [labelHidden, setLabelHidden] = React.useState(
    initialValues.labelHidden
  );
  const [max, setMax] = React.useState(initialValues.max);
  const [min, setMin] = React.useState(initialValues.min);
  const [step, setStep] = React.useState(initialValues.step);
  const [orientation, setOrientation] = React.useState(
    initialValues.orientation
  );
  const [trackSize, setTrackSize] = React.useState(initialValues.trackSize);
  const [emptyTrackColor, setEmptyTrackColor] = React.useState(
    initialValues.emptyTrackColor
  );
  const [filledTrackColor, setFilledTrackColor] = React.useState(
    initialValues.filledTrackColor
  );
  const [thumbColor, setThumbColor] = React.useState(initialValues.thumbColor);
  const [size, setSize] = React.useState(initialValues.size);
  const [value, setValue] = React.useState(initialValues.value);

  React.useEffect(() => {
    demoState.set(SliderField.displayName, {
      isDisabled,
      isValueHidden,
      label,
      labelHidden,
      max,
      min,
      step,
      orientation,
      trackSize,
      emptyTrackColor,
      filledTrackColor,
      thumbColor,
      size,
      value,
    });
  }, [
    initialValues,
    isDisabled,
    isValueHidden,
    label,
    labelHidden,
    max,
    min,
    step,
    orientation,
    trackSize,
    emptyTrackColor,
    filledTrackColor,
    thumbColor,
    size,
    value,
  ]);

  return React.useMemo(
    () => ({
      defaultValue: initialValues.defaultValue,
      isDisabled,
      isValueHidden,
      label,
      labelHidden,
      max,
      min,
      step,
      orientation,
      trackSize,
      emptyTrackColor,
      filledTrackColor,
      thumbColor,
      size,
      value,
      setEmptyTrackColor,
      setFilledTrackColor,
      setIsDisabled,
      setIsValueHidden,
      setLabel,
      setLabelHidden,
      setMax,
      setMin,
      setOrientation,
      setStep,
      setThumbColor,
      setTrackSize,
      setSize,
      setValue,
    }),
    [
      initialValues,
      isDisabled,
      isValueHidden,
      label,
      labelHidden,
      max,
      min,
      step,
      orientation,
      trackSize,
      emptyTrackColor,
      filledTrackColor,
      thumbColor,
      size,
      value,
      setEmptyTrackColor,
      setFilledTrackColor,
      setIsDisabled,
      setIsValueHidden,
      setLabel,
      setLabelHidden,
      setMax,
      setMin,
      setOrientation,
      setStep,
      setThumbColor,
      setTrackSize,
      setSize,
      setValue,
    ]
  );
};